<!--子版面弹窗-->
<script setup>

import GlobalDialog from "@/components/common/dialog/GlobalDialog.vue";
import ForumLink from "@/components/common/link/ForumLink.vue";
import {useStore} from "vuex";
import SubForum from "@/components/common/SubForum.vue";
import {ref, watch} from "vue";
import {useRoute} from "vue-router";


// 弹窗名称
const name = 'sub_forum'
const route = useRoute()
const store = useStore();

const closeDialog = () => store.commit("Dialog/closeDialog", name)

// 子版面
const forums = ref([]);
// 合集
const collections = ref([]);
// 已被屏蔽的镜像id
const blockedMirrorId = ref();
const forumId = ref();
const blockSubForumList = (forumId) => {
  return store.dispatch("Forum/blockSubForumList", {forumId}).then(res => {
    console.log(res.blockTopicId)
    blockedMirrorId.value = res.blockTopicId
  })
}

const open = async (data) => {
  console.log(data)
  forumId.value = data.forumId
  //分组
  if (data.hasOwnProperty('subForums')) {
    forums.value = data.subForums.filter(i => i.type === '版面');
    collections.value = data.subForums.filter(i => i.type === '合集');
  } else {
    forums.value = []
    collections.value = []
  }

  await blockSubForumList(data.forumId)
}

watch(route, () => {
  closeDialog()
})

</script>

<template>
  <global-dialog :name="name" destroy-on-close @open="open">
    <template #default="{data}">
      <template v-if="forums.length>0 && blockedMirrorId">
        <h3>版面</h3>
        <sub-forum v-for="forum in forums" :blocked="blockedMirrorId.includes(forum.mirrorId)" :forum="forum" :forum-id="forumId"/>
      </template>
      <template v-if="collections.length>0 && blockedMirrorId">
        <h3>合集</h3>
        <sub-forum v-for="forum in collections" :blocked="blockedMirrorId.includes(forum.mirrorId)" :forum="forum" :forum-id="forumId"/>
      </template>
    </template>
    <template #header="{data}">
      <forum-link v-if="data.hasOwnProperty('forumId')" :forum-id="data.forumId">{{ data.forumName }}</forum-link>
      的子版面
    </template>
  </global-dialog>
</template>

<style scoped>

</style>